<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('员工履历')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<style>
    h2 {
        text-align: center;
    }

    .bor {
        width: 100%;
        border: 5px solid #256FB8;
        padding: 10px;
    }

    .text {
        color: #256FB8;
        font-weight: 600;
        border-bottom: 1px dashed #256FB8;
    }

    .tab {
        width: 100%;
        border: 1px solid #256FB8;
        padding: 10px;
    }

    .tabs {
        width: 100%;
        padding: 10px;
    }

    .val {
        color: #808080;
        padding-bottom: 5px;
    }

    .title {
        font-weight: 700;
        font-size: 15px;
        color: #676A6C;
        padding-bottom: 5px;
    }

    hr {
        background-color: #676A6C;
    }

    .col-sm-11 {
        margin: 0 auto;
        float: none !important;
    }

    [v-cloak] {
        display: none;
    }

</style>
<body class="gray-bg">
<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">

            <div class="col-sm-12 select-table">
                <div class="btn-group-sm" id="toolbar" role="group">
                    <a class="btn btn-success" onclick="Choice()">
                        <i class="fa fa-plus"></i> 选择员工
                    </a>

                    <a class="btn btn-warning" onclick="exportReportTemplet()" shiro:hasPermission="monitor:job:export">
                        <i class="fa fa-download"></i> 导出PDF
                    </a>
                </div>
            </div>
            <div class="row" style="margin: 0 auto;" id="pdf">
                <div class="col-sm-12 select-table table-striped" style="background-color: #FFFFFF;">
                    <!--<label id="data"></label>-->
                    <!--<table id="bootstrap-table"></table>-->
                    <div class="row" style="background-color: #FFFFFF;" id="dv" v-cloak>
                        <div class="col-sm-11" v-if="list!=''">
                            <h2>员工履历</h2>
                            <div class="bor">
                                <div class="body">
                                    <p class="text">基本信息</p>
                                    <div class="tab" style="white-space: nowrap;">
                                        <div class="row">
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">工号</div>
                                                    <div class="col-sm-6 val">{{list.basicInfoMap.badge}}</div>
                                                </div>

                                            </div>
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">姓名</div>
                                                    <div class="col-sm-6 val">{{list.basicInfoMap.name}}</div>
                                                </div>
                                            </div>
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">性别</div>
                                                    <div class="col-sm-5 val" v-if="list.basicInfoMap.Gender==1">男</div>
                                                    <div class="col-sm-5 val" v-if="list.basicInfoMap.Gender==2">女</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">年龄</div>
                                                    <div class="col-sm-6 val">{{list.basicInfoMap.age}}</div>
                                                </div>

                                            </div>
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">最高学历</div>
                                                    <div class="col-sm-6 val">{{list.basicInfoMap.HighLevelTitle}}</div>
                                                </div>
                                            </div>
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">开始工作日</div>
                                                    <div class="col-sm-6 val"
                                                         v-if="list.basicInfoMap.WorkBeginDate!=null">
                                                        {{list.basicInfoMap.WorkBeginDate}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">入职日期</div>
                                                    <div class="col-sm-6 val">{{list.basicInfoMap.JoinDate}}</div>
                                                </div>

                                            </div>
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">公司</div>
                                                    <div class="col-sm-6 val">{{list.basicInfoMap.compName}}</div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">部门</div>
                                                    <div class="col-sm-6 val">{{list.basicInfoMap.depName}}</div>
                                                </div>

                                            </div>
                                            <div class="col-sm-3">
                                                <div class="row">
                                                    <div class="col-sm-5 title">岗位</div>
                                                    <div class="col-sm-6 val">{{list.basicInfoMap.JobName}}</div>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                    <hr/>
                                    <div class="body">
                                        <p class="text">合同信息</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>合同公司</th>
                                                    <th>合同类型</th>
                                                    <th>开始日期</th>
                                                    <th>结束日期</th>
                                                    <th>合同期</th>
                                                </tr>
                                                </thead>
                                                <tbody v-for="(item,index) in list.contractInfoMap" :key="index">
                                                <tr>
                                                    <td>{{item.compName}}</td>
                                                    <td>{{item.ConPropertyTitle}}</td>
                                                    <td>{{item.ConBeginDate}}</td>
                                                    <td>{{item.ConEndDate}}</td>
                                                    <td>{{item.ConTerm}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                    <div class="body">
                                        <p class="text">工作经验</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>开始时间</th>
                                                    <th>结束时间</th>
                                                    <th>工作单位</th>
                                                    <th>职位</th>
                                                </tr>
                                                </thead>
                                                <tbody v-if="list.workInfoMap[0]!=null"
                                                       v-for="(item,index) in list.workInfoMap" :key="index">
                                                <tr>
                                                    <td>{{item.BeginDate}}</td>
                                                    <td>{{item.EndDate}}</td>
                                                    <td>{{item.Company}}</td>
                                                    <td>{{item.job}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <hr/>
                                    <div class="body">
                                        <p class="text">项目经验</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>开始时间</th>
                                                    <th>结束时间</th>
                                                    <th>项目名称</th>
                                                    <th>担任职务</th>
                                                </tr>
                                                </thead>
                                                <tbody v-if="list.proInfoMap.length!=0"
                                                       v-for="(item,index) in list.proInfoMap" :key="index">
                                                <tr>
                                                    <td>{{item.BeginDate}}</td>
                                                    <td>{{item.EndDate}}</td>
                                                    <td>{{item.ProjName}}</td>
                                                    <td>{{item.job}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="body">
                                        <p class="text">教育经历</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>开始时间</th>
                                                    <th>结束时间</th>
                                                    <th>学校</th>
                                                    <th>专业</th>
                                                    <th>学历</th>
                                                </tr>
                                                </thead>
                                                <tbody v-for="(item,index) in list.educationInfoMap" :key="index">
                                                <tr>
                                                    <td>{{item.BeginDate}}</td>
                                                    <td>{{item.EndDate}}</td>
                                                    <td>{{item.SchoolName}}</td>
                                                    <td>{{item.Major}}</td>
                                                    <td>{{item.eduType}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                    <hr/>
                                    <div class="body">
                                        <p class="text">培训经历</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>开始时间</th>
                                                    <th>结束时间</th>
                                                    <th>机构</th>
                                                    <th>主题</th>
                                                </tr>
                                                </thead>
                                                <tbody v-if="list.trainingInfoMap[0]!=null"
                                                       v-for="(item,index) in list.trainingInfoMap" :key="index">
                                                <tr>
                                                    <td>{{item.BeginDate}}</td>
                                                    <td>{{item.EndDate}}</td>
                                                    <td>{{item.Vendor}}</td>
                                                    <td>{{item.content}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <hr/>
                                    <div class="body">
                                        <p class="text">人事变动</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>调动类型</th>
                                                    <th>公司</th>
                                                    <th>部门</th>
                                                    <th>岗位</th>
                                                    <th>行政上级</th>
                                                    <th>生效日期</th>
                                                </tr>
                                                </thead>
                                                <tbody v-for="(item,index) in list.empChangeInfoMap" :key="index">
                                                <tr>
                                                    <td>{{item.orgchangetype}}</td>
                                                    <td>{{item.compId}}</td>
                                                    <td>{{item.depId}}</td>
                                                    <td>{{item.jobId}}</td>
                                                    <td>{{item.ReportTo}}</td>
                                                    <td>{{item.EffectDate}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="body">
                                        <p class="text">薪资变动</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>原工资总额</th>
                                                    <th>工资总额</th>
                                                    <th>原年薪</th>
                                                    <th>年薪</th>
                                                    <th>生效日期</th>
                                                </tr>
                                                </thead>
                                                <tbody v-for="(item,index) in list.salaryInfoMap" :key="index">
                                                <tr>
                                                    <td v-if="item.P10041Old!=null">{{item.P10041Old}}</td>
                                                    <td v-if="item.P10041Old==null"></td>
                                                    <td v-if="item.P10041!=null">{{item.P10041}}</td>
                                                    <td v-if="item.P10041==null"></td>
                                                    <td v-if="item.P10042Old!=null">{{item.P10042Old}}</td>
                                                    <td v-if="item.P10042Old==null"></td>
                                                    <td v-if="item.P10042!=null">{{item.P10042}}</td>
                                                    <td v-if="item.P10042==null"></td>
                                                    <td>{{item.EffectDate}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>


                                    <div class="body">
                                        <p class="text">福利变动</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>原社保缴纳地区</th>
                                                    <th>新社保缴纳地区</th>
                                                    <th>原公积金缴纳地区</th>
                                                    <th>新公积金缴纳地区</th>
                                                    <th>生效日期</th>
                                                </tr>
                                                </thead>
                                                <tbody v-if="list.beneChangeMap.length!=0"
                                                       v-for="(item,index) in list.beneChangeMap" :key="index">
                                                <tr>
                                                    <td>{{item.BenefitCity}}</td>
                                                    <td v-if="item.NewBenefitCity!=null">{{item.NewBenefitCity}}</td>
                                                    <td v-if="item.NewBenefitCity==null"></td>
                                                    <td v-if="item.AccuCity!=null">{{item.AccuCity}}</td>
                                                    <td v-if="item.AccuCity==null"></td>
                                                    <td>{{item.NewAccuCity}}</td>
                                                    <td>{{item.EffectDate}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="body">
                                        <p class="text">考勤变动</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>生产线(旧)</th>
                                                    <th>生产线</th>
                                                    <th>班组(旧)</th>
                                                    <th>班组</th>
                                                    <th>班车(旧)</th>
                                                    <th>班车</th>
                                                    <th>考勤员</th>
                                                    <th>开始时间</th>
                                                    <th>结束时间</th>
                                                </tr>
                                                </thead>
                                                <tbody v-for="(item,index) in list.attendChangeMap" :key="index">
                                                <tr>
                                                    <td v-if="item.LineIDOld==null"></td>
                                                    <td v-if="item.LineIDNew==null"></td>
                                                    <td v-if="item.TeamIDOld==null"></td>
                                                    <td v-if="item.TeamIDNew==null"></td>
                                                    <td v-if="item.BusOld==null"></td>
                                                    <td v-if="item.BusNew==null"></td>
                                                    <td v-if="item.ATBadgeNew==null"></td>

                                                    <td v-if="item.LineIDOld!=null">{{item.LineIDOld}}</td>
                                                    <td v-if="item.LineIDNew!=null">{{item.LineIDNew}}</td>
                                                    <td v-if="item.TeamIDOld!=null">{{item.TeamIDOld}}</td>
                                                    <td v-if="item.TeamIDNew!=null">{{item.TeamIDNew}}</td>
                                                    <td v-if="item.BusOld!=null">{{item.BusOld}}</td>
                                                    <td v-if="item.BusNew!=null">{{item.BusNew}}</td>
                                                    <td v-if="item.ATBadgeNew!=null">{{item.ATBadgeNew}}</td>
                                                    <td>{{item.BeginDate}}</td>
                                                    <td>{{item.EndDate}}</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <hr/>

                                    <div class="body">
                                        <p class="text">绩效考核</p>
                                        <div class="tabs">
                                            <table class="table table-hover">
                                                <thead>
                                                <tr>
                                                    <th>年度</th>
                                                    <th>考核等级</th>
                                                    <th>考核得分</th>

                                                </tr>
                                                </thead>
                                                <tbody v-if="list.pEmpResultInfoMap.length!=0"
                                                       v-for="(item,index) in list.pEmpResultInfoMap">
                                                <tr>
                                                    <td>{{item.term}}</td>
                                                    <td>{{item.Grade}}</td>
                                                    <td>{{item.score}}</td>

                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: vue-js"/>
<th:block th:include="include :: pdf-js"/>


<script th:inline="javascript">
    var prefix = ctx + "personStatisticsAnalysis/empResume";
    var eid;
    var vm = new Vue({
        el: '#dv',
        data: {
            list: []
        },
        methods: {}

    })
    $(function () {
        var panehHidden = false;
        if ($(this).width() < 800) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 350});
    });

    function Choice() {
        var url = prefix + "/ChoiceEmp";
        var options = {
            title: '选择人员',
            width: "800",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var body = layer.getChildFrame('body', index);
        eid = body.find('#eid').val();
        layer.close(index);
        getData();
    }

    function getData() {
        $.ajax({
            async: false,
            url: prefix + "/getData",
            data: {"eid": eid},
            type: "post",
            dataType: "json",
            success: function (data) {
                vm.list = data;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("错误,请联系管理员,错误信息:" + textStatus);
            }
        });
    }

    function exportReportTemplet() {
        var element = $("#dv");    // 这个dom元素是要导出pdf的div容器
        var w = element.width();    // 获得该容器的宽
        var h = element.height();    // 获得该容器的高
        var canvas = document.createElement("canvas");
        canvas.width = w * 2;    // 将画布宽&&高放大两倍
        canvas.height = h * 2;
        var context = canvas.getContext("2d");
        var scale = 2;
        context.scale(2, 2);
        var opts = {
            scale: scale,
            canvas: canvas,
            width: w,
            height: h,
            useCORS: true,
            background: '#FFFFFF'
        }

        html2canvas(element, opts).then(function (canvas) {
            allowTaint: false;
            taintTest: false;
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;


            var pageData = canvas.toDataURL('image/jpeg', 1.0);
            var pdf = new jsPDF('', 'pt', 'a4');
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 595.28 / contentWidth * contentHeight;

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else {    // 分页
                while (leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if (leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save(vm.list.basicInfoMap.name + '员工履历.pdf');
        })

    }


</script>
</body>
</html>